<template>
  <div>
    <el-input v-model="input" placeholder="输入组名" size="mini" style="width: 200px"></el-input>

    <el-button size="mini"  @click="selectBookname()">查询</el-button>

    <el-button size="mini"  @click="addbookView">新增</el-button>


    <template>
      <el-table
        :data="bookdata"
        border
        height="680"
        style="width: 100%;">
        <el-table-column
          prop="name"
          label="期刊杂志">
        </el-table-column>

        <el-table-column
          prop="periodical"
          label="期数">
        </el-table-column>

        <el-table-column
          prop="path"
          label="封面路径">
        </el-table-column>

        <el-table-column
          prop="shortrecommend"
          label="短简介">
        </el-table-column>

        <el-table-column
          prop="longrecommend"
          label="长简介">
        </el-table-column>

        <el-table-column
          prop="contenttotalduration"
          label="总时长">
        </el-table-column>

        <el-table-column
          prop="price"
          label="价格">
        </el-table-column>


        <el-table-column
          prop="payModedesc"
          label="收费方式">
        </el-table-column>

        <el-table-column
          prop="playcount"
          label="点击量">
        </el-table-column>







        <el-table-column  label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="updatePeriod(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deletePeriod(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :currentPage=currentPage4
      :page-sizes="[100, 200, 300, 400]"
      :page-size=pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>



    <el-dialog title="新增" :visible.sync="dialogFormVisible" size="mini" style="width: 100%;height: 100%" :fullscreen=true>
      <el-form :model="form" size="mini" :inline="true">
        <el-form-item label="专辑" :label-width="formLabelWidth" >
          <el-input v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item label="期数" :label-width="formLabelWidth" >
          <el-input v-model="form.periodical" ></el-input>
        </el-form-item>

        <el-form-item label="关联专辑类型" :label-width="formLabelWidth" >
          <el-input v-model="form.audioId" @focus="relate()"></el-input>
        </el-form-item>


        <el-form-item label="短简介" :label-width="formLabelWidth" >
          <el-input v-model="form.shortrecommend" ></el-input>
        </el-form-item>

        <el-form-item label="长简介" :label-width="formLabelWidth" >
          <el-input v-model="form.longrecommend"></el-input>
        </el-form-item>


        <el-form-item label="作者" :label-width="formLabelWidth" >
          <el-input v-model="form.author"></el-input>
        </el-form-item>


        <el-form-item label="主播" :label-width="formLabelWidth" >
          <el-input v-model="form.readerName"></el-input>
        </el-form-item>

        <el-form-item label="专辑节目总数" :label-width="formLabelWidth" >
          <el-input v-model="form.chapterCount"></el-input>
        </el-form-item>


        <el-form-item label="专辑总时长" :label-width="formLabelWidth" >
          <el-input v-model="form.contentTotalDurat"></el-input>
        </el-form-item>


        <el-form-item label="收费方式" :label-width="formLabelWidth" >
        <!--  <el-input v-model="form.payMode"></el-input>-->
          <el-select v-model="form.payMode" placeholder="请选择">
            <el-option
              v-for="item in payModes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

       <!-- <el-form-item label="收费方式说明" :label-width="formLabelWidth" >
          <el-input v-model="form.payModeDesc"></el-input>
        </el-form-item>-->






        <el-form-item label="价格" :label-width="formLabelWidth" >
          <el-input v-model="form.price"></el-input>
        </el-form-item>



        <el-form-item label="上下架状态" :label-width="formLabelWidth" >
         <!-- <el-input v-model="form.status"></el-input>-->

          <el-select v-model="form.status" placeholder="请选择">
            <el-option
              v-for="item in statuses"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="媒体类型" :label-width="formLabelWidth" >
         <!-- <el-input v-model="form.mediaType"></el-input>-->

          <el-select v-model="form.mediaType" placeholder="请选择">
            <el-option
              v-for="item in mediaTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>


        </el-form-item>





        <el-form-item label="上传封面" :label-width="formLabelWidth" >
          <el-upload class="upload-demo" size="mini" ref="upload1" :action=upfileUrl :on-preview="handlePreview"
                     :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :multiple=false :limit=1>
            <el-button slot="trigger" size="small" type="primary">选取封面</el-button>
            <!--  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
          </el-upload>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="addBook()" size="mini"> 确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="修改" :visible.sync="dialogFormVisible2" size="mini" style="width: 100%;height: 100%" :fullscreen=true>
      <!--<el-form :model="form" size="mini" :inline="true">
        <el-form-item label="书名" :label-width="formLabelWidth" >
          <el-input v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item label="关联期刊" :label-width="formLabelWidth" >
          <el-input v-model="form.selectName" @focus="relate()"></el-input>
        </el-form-item>

        <el-form-item label="期刊期" :label-width="formLabelWidth" >
          <el-input v-model="form.periodical"></el-input>
        </el-form-item>

        <el-form-item label="上传封面" :label-width="formLabelWidth" >
          <el-upload class="upload-demo" size="mini" ref="upload1" :action=upfileUrl :on-preview="handlePreview"
                     :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :multiple=false :limit=1>
            <el-button slot="trigger" size="small" type="primary">选取封面</el-button>
            &lt;!&ndash;  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>&ndash;&gt;
          </el-upload>
        </el-form-item>


      </el-form>-->


      <el-form :model="form" size="mini" :inline="true">
        <el-form-item label="专辑" :label-width="formLabelWidth" >
          <el-input v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item label="关联专辑类型" :label-width="formLabelWidth" >
          <el-input v-model="form.audioId" @focus="relate()"></el-input>
        </el-form-item>


        <el-form-item label="短简介" :label-width="formLabelWidth" >
          <el-input v-model="form.shortrecommend" ></el-input>
        </el-form-item>

        <el-form-item label="长简介" :label-width="formLabelWidth" >
          <el-input v-model="form.longrecommend"></el-input>
        </el-form-item>


        <el-form-item label="作者" :label-width="formLabelWidth" >
          <el-input v-model="form.author"></el-input>
        </el-form-item>


        <el-form-item label="主播" :label-width="formLabelWidth" >
          <el-input v-model="form.readerName"></el-input>
        </el-form-item>

        <el-form-item label="专辑节目总数" :label-width="formLabelWidth" >
          <el-input v-model="form.chapterCount"></el-input>
        </el-form-item>


        <el-form-item label="专辑总时长" :label-width="formLabelWidth" >
          <el-input v-model="form.contentTotalDurat"></el-input>
        </el-form-item>


        <el-form-item label="收费方式" :label-width="formLabelWidth" >
          <!--  <el-input v-model="form.payMode"></el-input>-->
          <el-select v-model="form.payMode" placeholder="请选择">
            <el-option
              v-for="item in payModes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="收费方式说明" :label-width="formLabelWidth" >
           <el-input v-model="form.payModeDesc"></el-input>
         </el-form-item>-->






        <el-form-item label="价格" :label-width="formLabelWidth" >
          <el-input v-model="form.price"></el-input>
        </el-form-item>



        <el-form-item label="上下架状态" :label-width="formLabelWidth" >
          <!-- <el-input v-model="form.status"></el-input>-->

          <el-select v-model="form.status" placeholder="请选择">
            <el-option
              v-for="item in statuses"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="媒体类型" :label-width="formLabelWidth" >
          <!-- <el-input v-model="form.mediaType"></el-input>-->

          <el-select v-model="form.mediaType" placeholder="请选择">
            <el-option
              v-for="item in mediaTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>


        </el-form-item>





        <el-form-item label="上传封面" :label-width="formLabelWidth" >
          <el-upload class="upload-demo" size="mini" ref="upload1" :action=upfileUrl :on-preview="handlePreview"
                     :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :multiple=false :limit=1>
            <el-button slot="trigger" size="small" type="primary">选取封面</el-button>
            <!--  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
          </el-upload>
        </el-form-item>


      </el-form>










      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="updateAttr()" size="mini"> 确 定</el-button>
      </div>
    </el-dialog>




    <el-dialog title="选择关联" :visible.sync="dialogFormVisible1" size="mini" style="width: 100%;height: 500px">


      <template>
        <el-table
          :data="bookdatadialog"
          border
          height="680"
          style="width: 100%;">
          <el-table-column
            prop="id"
            label="id">
          </el-table-column>
          <el-table-column
            prop="name"
            label="期刊名">
          </el-table-column>


          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="addattr(scope.row)">选择</el-button>
            </template>
          </el-table-column>




        </el-table>
      </template>




    </el-dialog>







  </div>
</template>

<script>


  import axios from 'axios';


  export default {
    name: 'HelloWorld',
    data() {
      return {
        bookdata:[],
        pageSize:100,
        dialogFormVisible:false,
        form:{},
        formLabelWidth:'120px',
        input:"",
        total:0,
        fileList:[],
        upfileUrl:"",
        upfileUrlCover:"",
        currentPage4:1,
        pageSize:100,
        pageSize:100,
        updateTime:0,
        dialogFormVisible1:false,
        bookdatadialog:[],
        audio_id:"",
        dialogFormVisible2:false,
        payModes:[{
            value: '0',
            label: '免费'
        },{
          value: '1',
          label: '付费'
      }],
        statuses:[{
          value: '1',
          label: '上架'
        },{
          value: '0',
          label: '下架'
        }
        ],
        mediaTypes:[{
          value: '1',
          label: '音频'
        },{
          value: '2',
          label: '视频'
        }]
      }
    },


    methods: {
      addbookView(){
        this.dialogFormVisible=true;
        delete this.form.name;
        delete this.form.uuid;
      },


      getPage(obj) {
        axios.post(process.env.BASE_API + 'aduioAttr/getMember', obj).then(respone => {
          this.bookdata = respone.data.member;
          this.total = respone.data.total;
        })
          .catch(error => {

          });


        axios.post(process.env.BASE_API + 'audio/getMember', obj).then(respone => {
          this.bookdatadialog = respone.data.member;

        })
          .catch(error => {

          });


      },


      handleSizeChange(val) {
        this.pageSize = `${val}`;
        let pageSize = this.pageSize;
        let obj = {
          "currentPageNum": 1,
          "endIndex": 0,
          "pageSize": parseInt(pageSize),
          "total": 0
        }

        this.getPage(obj);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4 = `${val}`;


        let obj = {
          "currentPageNum":parseInt(this.currentPage4),
          "endIndex": 0,
          "pageSize": parseInt(this.pageSize),
          "total": 0
        }

        this.getPage(obj);

      },
      handleRemove(){

      },
      handlePreview(){

      },
      //查询
      selectBookname(){

        if(this.input==null|this.input==""){
          let obj = {
            "currentPageNum":parseInt(this.currentPage4),
            "endIndex": 0,
            "pageSize": parseInt(this.pageSize),
            "total": 0
          }
          this.getPage(obj);
          return ;
        }


        let obj={
          name:this.input
        }
        axios.post(process.env.BASE_API + 'aduioAttr/selectName', obj).then(respone => {
          this.bookdata = respone.data;
        }).catch(error => {

        });

      },
      addBook(){
        delete this.form.selectName;

        this.form.uuid=Date.parse(new Date())+"";
        console.log(this.form);
        this.upfileUrl=process.env.BASE_API+"aduioAttr/upfile/"+this.form.uuid;
        if(this.form.payMode==1){
          this.form.payMode=1;
          this.form.payModedesc="付费";
        }else {
          this.form.payMode=0;
          this.form.payModedesc="免费";
        }
        /*if(){

        }*/



        console.log(this.form);
      /*  if(){

        }*/












    //    this.upfileUrlCover=process.env.BASE_API+"book/insertBookCover?data="+this.updateTime;
        //记录书名
        let obj={mBookMagament:this.form,mPage:{"currentPageNum":parseInt(this.currentPage4),
            "endIndex": 0,
            "pageSize": parseInt(this.pageSize),
            "total": 0}};
        axios.post(process.env.BASE_API + 'aduioAttr/add', obj).then(respone => {

          this.bookdata = respone.data.member;



          console.log( this.upfileUrl +"   "+ this.upfileUrlCover);
          this.$refs.upload1.submit();
        //  this.$refs.upload2.submit();
          this.dialogFormVisible=false;
          delete this.form.name
          delete this.form.uuid

        }).catch(error => {
          this.$message("新增错误");
          this.dialogFormVisible=false;
        });


        /*   axios.post(process.env.BASE_API + 'book/addbook', obj).then(respone => {
             this.bookdata = respone.data;
             dialogFormVisible=false;
           }).catch(error => {
             this.$message("新增错误");
             dialogFormVisible=false;
           });*/

        //   book/insertBook?data=



      },
      relate(){
        this.dialogFormVisible1=true;
      },

      addattr(row){
        this.form.selectName=row.name;
        this.form.audioId=row.id;
        this.dialogFormVisible1=false;
      },
      deletePeriod(row){

        console.log(row);

        let obj={
          "mBookMagament":row,
          "mPage": {
            "currentPageNum": 1,
            "endIndex": 0,
            "pageSize": 10,
            "total": 0
          }
        }


        axios.delete(process.env.BASE_API + "aduioAttr/deleteByPrimaryKey", {data: obj}).then(respone => {
          this.bookdata = respone.data.member;
        })
          .catch(error => {

          })

      },
      handleClose(){

      },
      updateAttr(){
        delete this.form.selectName;

       // this.form.uuid=Date.parse(new Date())+"";

        if(this.form.payMode==1){
          this.form.payMode=1;
          this.form.payModedesc="付费";
        }else {
          this.form.payMode=0;
          this.form.payModedesc="免费";
        }







        this.upfileUrl=process.env.BASE_API+"aduioAttr/upfile/"+ this.form.uuid;

        let obj={
          "mBookMagament": this.form,
          "mPage": {
            "currentPageNum": 1,
            "endIndex": 0,
            "pageSize": 100,
            "total": 0
          }
        }

        axios.post(process.env.BASE_API + "aduioAttr/updateByPrimaryKeySelective",obj).then(respone => {
          this.bookdata = respone.data.member;

          this.$refs.upload1.submit();
          this.dialogFormVisible2=false

        })
          .catch(error => {

          })
      },


      updatePeriod(row){
        this.dialogFormVisible2=true;
        this.form=row;
        console.log(this.form);
      },
      uploadSuccess(){
        let obj = {
          "currentPageNum":parseInt(this.currentPage4),
          "endIndex": 0,
          "pageSize": parseInt(this.pageSize),
          "total": 0
        }
        this.getPage(obj);

        this.fileList=[];


      },




    },


    mounted() {
      let obj = {
        "currentPageNum":parseInt(this.currentPage4),
        "endIndex": 0,
        "pageSize": parseInt(this.pageSize),
        "total": 0
      }
      this.getPage(obj);


    },




  }
</script>

<style scoped>



</style>
